<template>
  <div class="animation-container_clip">
    <div id="face">
      <div id="left-eye" class="eye"></div>
      <div id="right-eye" class="eye"></div>
      <div id="mouse"></div>
    </div>
    <input class="clip-input" type="range" min="0" max="1" step="0.01" value="0" />
  </div>
</template>

<script setup lang="ts">
  import { onMounted } from 'vue'
  onMounted(() => {
    const inp: HTMLInputElement = document.querySelector('.clip-input')!
    const face: HTMLElement = document.querySelector('#face')!
    const leftEye: HTMLElement = document.querySelector('#left-eye')!
    const rightEye: HTMLElement = document.querySelector('#right-eye')!
    const mouse: HTMLElement = document.querySelector('#mouse')!
    const moveFunc = () => {
      face?.style.setProperty('--delay', `-${inp.value}s`)
      leftEye?.style.setProperty('--delay', `-${inp.value}s`)
      rightEye?.style.setProperty('--delay', `-${inp.value}s`)
      mouse?.style.setProperty('--delay', `-${inp.value}s`)
    }
    inp.oninput = moveFunc
    moveFunc()
  })
</script>

<style lang="less" scoped>
  // 定义动画
  @keyframes lefteyechange {
    0% {
      clip-path: polygon(0 80%, 100% 0, 100% 100%, 0% 100%);
    }
    100% {
      clip-path: polygon(0 0%, 100% 0, 100% 100%, 0% 100%);
    }
  }

  @keyframes righteyechange {
    0% {
      clip-path: polygon(0 0, 100% 77%, 100% 100%, 0% 100%);
    }
    100% {
      clip-path: polygon(0 0%, 100% 0, 100% 100%, 0% 100%);
    }
  }

  @keyframes mousechange {
    50% {
      height: 6px;
      box-shadow: inset 0 4px 0 #fff;
      transform: translateY(0px);
    }
    50.1% {
      height: 6px;
      box-shadow: inset 0 4px 0 #fff;
      transform: translateY(0px);
      clip-path: inset(50% 0% 0% 0%);
    }
    to {
      height: 50px;
      box-shadow: inset 0 -20px 0 #fff;
      transform: translateY(-30px);
      clip-path: inset(50% 0% 0% 0%);
    }
  }

  @keyframes facechange {
    0% {
      background: rgb(243, 30, 30);
    }
    50% {
      background: rgb(251, 184, 0);
    }
    100% {
      background: rgb(3, 199, 81);
    }
  }

  .animation-container_clip {
    #face {
      display: grid;
      grid-template-rows: 1fr 1fr;
      grid-template-columns: 1fr 1fr;
      width: 100px;
      height: 100px;
      border-radius: 50%;
      position: relative;
      --delay: 0s; // 定义动画延迟，类似波动时间轴实现实体在时间轴上的前进后退，对animation属性而言，delay 1s,表示1s后执行；delay 0s，表示立即执行，delay -1s，表示执行完毕，所以让delay在-1 -- 0s之间变化
      animation: facechange 1s var(--delay) linear forwards paused;

      .eye {
        width: 30px;
        height: 30px;
        border-radius: 50%;
        background-color: #fff;
      }
      #left-eye {
        position: absolute;
        left: 14px;
        top: 20px;
        // clip-path: polygon(0 80%, 100% 0, 100% 100%, 0% 100%);
        --delay: 0s; // 定义动画延迟，类似波动时间轴实现实体在时间轴上的前进后退，对animation属性而言，delay 1s,表示1s后执行；delay 0s，表示立即执行，delay -1s，表示执行完毕，所以让delay在-1 -- 0s之间变化
        animation: lefteyechange 1s var(--delay) linear forwards paused;
      }
      #right-eye {
        position: absolute;
        left: 56px;
        top: 20px;
        // clip-path: polygon(0 0, 100% 77%, 100% 100%, 0% 100%);
        --delay: 0s; // 定义动画延迟，类似波动时间轴实现实体在时间轴上的前进后退，对animation属性而言，delay 1s,表示1s后执行；delay 0s，表示立即执行，delay -1s，表示执行完毕，所以让delay在-1 -- 0s之间变化
        animation: righteyechange 1s var(--delay) linear forwards paused;
      }
      #mouse {
        grid-column: 1 / 3;
        width: 50px;
        height: 50px;
        border-radius: 50px;
        background-color: #fff;
        position: absolute;
        left: 25px;
        top: 70px;

        transform: translateY(-10px);
        box-shadow: inset 0 5px 0 #fff;
        clip-path: inset(0% 0% 50% 0%);
        --delay: 0s; // 定义动画延迟，类似波动时间轴实现实体在时间轴上的前进后退，对animation属性而言，delay 1s,表示1s后执行；delay 0s，表示立即执行，delay -1s，表示执行完毕，所以让delay在-1 -- 0s之间变化
        animation: mousechange 1s var(--delay) linear forwards paused;
      }
    }
    input {
      margin-top: 20px;
    }
  }
</style>
